<template>
  <page-list class="" :emptyTitle="`暂无${pageTitle}`" :fixed="false" :pageTitle="pageTitle" :queryParams="props.params" :immediate="false" :pageParams="pageParams" height="100%" listKey="records" @register="registerTable" :apiFetch="UserApi.postUserOrderPage">
    <template #top> </template>
    <template #="{ dataSource }">
      <!-- <zdy-fixed></zdy-fixed> -->
      <!-- <view class="list-box" v-if="dataSource && dataSource.length">
        <view class="list-item" v-for="(item, index) in dataSource" :key="index" @tap="toDetail(item)">
          <view class="name-box">
            <view class="name line-clamp-2">{{ item.name }}</view>
          </view>
          <view class="date">{{ item.issueDate }}</view>
        </view>
      </view> -->

      <view class="list" v-if="dataSource && dataSource.length">
        <view v-for="(item, index) in dataSource" :key="item.id" class="list-item" :class="status == index && 'isSelect'" @tap="toDetail(item)">
          <view class="order">
            <view>订单编号: {{ item.orderNo }}</view>
            <view class="status">{{ statusList[item.status] }}</view>
          </view>
          <view class="msg">
            <view> 套餐类型: {{ item.type == 0 ? '单次卡':'多次卡' }} </view>
            <view> 套餐名称: {{ item.packageName }} </view>
            <view> 消费时间: {{ item.createTime }} </view>

          </view>
        </view>

      </view>
    </template>
    <template #empty>
      <up-empty mode="data" icon="/static/images/none.png" text="暂无数据">
      </up-empty>

      <!-- <image src="@/static/images/none.png" mode="scaleToFill" class="empety" /> -->
    </template>
    <template #bottom> </template>
  </page-list>
</template>

<script setup>
import { useTable } from "@/components/page-list/hooks/useTable.js";
// import { postFavoritePage } from "@/api/index";
import { UserApi } from "@/api";
// import { postUserOrderPage } from "@/api/user";
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})
const statusList = {
  0: "使用中",
  1: "异常结束",
  2: "已完成",
}
const postFavoritePage = () => {
  return new Promise((resolve) => {
    resolve([
      {
        name: 1,
      },
    ]);
  });
};

const [registerTable, { reloadList }] = useTable();
const current = ref("");

const activeStyle = reactive({
  color: "#192236",
  fontWeight: "bold",
  "font-size": "28rpx",
  color: "#192236",
  "line-height": "48rpx",
});
const inactiveStyle = reactive({
  "font-weight": "400",
  "font-size": "28rpx",
  color: "#192236",
  "line-height": "48rpx",
});
const itemStyle = ref(
  "padding-left: 32rpx; padding-right: 32rpx; height: 108rpx;"
);

const pageTitle = ref("数据");

const pageParams = reactive({

  // orders: [
  //   {
  //     asc: false,
  //     column: "issueDate",
  //   },
  // ],
});

const queryParams = reactive({

});

onLoad(async (options) => {
  reloadList();
});

onUnload(() => {
  console.log("销毁");
});

// let id = 1;

// const toDetail = (item) => {
//   uni.$u.route({
//     url: "/pagesIndex/articleDetail/index",
//     params: {
//       bpaiId: item.bpaiId,
//     },
//   });
// };
function toDetail(item) {
  console.log("item", item);
  if (item.status == 0) {
    uni.navigateTo({
      url: "/pagesCommon/shampooing/index?orderId=" + item.id,
    });
  }
}
</script>

<style lang="scss" scoped>
.list-tab {
  ::v-deep .u-tabs {
    background: #fff;
    border-bottom: 1rpx solid #eee;
  }
  :deep(.u-tabs__wrapper__nav__line) {
    bottom: 0;
  }
}

.list-box {
  padding: 32rpx;
  .list-item {
    width: 686rpx;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    padding: 32rpx 32rpx 24rpx;
    &:not(:last-child) {
      margin-bottom: 16rpx;
    }
    .name-box {
      padding-bottom: 24rpx;
      margin-bottom: 24rpx;
      border-bottom: 2rpx solid #f5f5f5;
    }
    .name {
      font-weight: 600;
      font-size: 28rpx;
      color: #192236;
      // padding-bottom: 32rpx;
      // border-bottom: 2rpx solid #f5f5f5;
      // margin-bottom: 24rpx;
    }
    .date {
      font-weight: 400;
      font-size: 24rpx;
      color: #989ca6;
      line-height: 34rpx;
    }
  }
}

.list {
  padding: 15px 0;
  flex: 1;
  overflow-y: auto;
  // display: flex;
  // flex-direction: column;
  // gap: 20px;
  .list-item {
    // height: 100px;
    background: #fff;
    padding: 10px 15px;
    border: 1rpx solid #ececec;
    box-shadow: 0 0 10px #e9e9e9;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    &:not(:last-child) {
      margin-bottom: 16px;
    }
    .lf-icon {
      width: 50px;
      height: 50px;
      margin-right: 20rpx;
    }
    .tj-icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 35px;
      height: 35px;
    }
    .msg {
      flex: 1;
    }
    .head {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .name {
      font-size: 18px;
      font-weight: 600;
      margin-right: 15px;
    }
    .intro {
      font-size: 14px;
      color: #a2a2a2;
    }
    .duration {
      padding: 2px 10px;
      border-radius: 20px;
      background: #fff6c1;
      color: #ffc43d;
      font-size: 12px;
    }
  }
  .order {
    display: flex;
    font-size: 16px;
    padding-bottom: 5px;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
    font-weight: 600;
    .status {
      font-size: 12px;
      align-self: flex-end;
    }
  }
  .msg {
    padding-top: 5px;
    color: #9e9e9e;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .rate-box {
    display: flex;
  }
}
</style>
